<template>
  <div class="dialog">
    <el-dialog v-model="open" :width="width" align-center center @closed="clsoebtn" destroy-on-close>
      <template #header>
        <div class="dialog-header">
          <h2>{{ title }}</h2>
        </div>
      </template>
   <slot name="default"  ></slot> 
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="clsoebtn">取消</el-button>
          <el-button type="primary" @click="confimbtn">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>


const open = defineModel()
const emit = defineEmits(['update:modelValue','comfimemitbtn'])
const props = defineProps({
  title: {
    type: String,
    default: '新增',
  },
  width: {
    type: String,
    default: '30%'
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})
const clsoebtn = () => {
  open.value = false
}
const confimbtn = () => {
  emit('comfimemitbtn')
}

</script>

<style lang="scss" scoped>
.dialog {
  :deep(.el-dialog__header) {
    background: #0B245D;
    margin: 0;
    padding: 0;
      color: #ffff;
  }
   :deep(.el-dialog__headerbtn){
    position: absolute;
    top:0px;
    height: 35.2px;
    width: 35.2px;
    border-radius: 50%;
   }
     :deep(.el-icon svg){
      color: #FFA800;
     }
     :deep(.dialog-footer){
      display: flex;
      justify-content: flex-end;

     }
}
</style>